<template>
    <el-container style="height: 100vh; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <NavMenu :menuList="menuList" />
        </el-aside>
        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <el-icon style="margin-right: 15px;">
                        <setting />
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item @click="navigateTo('userInfo')">查看个人信息</el-dropdown-item>
                            <el-dropdown-item @click="exitLogin">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <span>userName123</span>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { RouterView, useRouter } from 'vue-router'

const menuList = reactive([
    {
        router: "/index",
        title: "首页",
        role: [1003, 1004, 1005]
    },
    {
        router: "/orderList",
        title: "订单列表",
        role: [1003]
    },
    {
        title: "工作人员管理",
        role: [1003],
        children: [
            {
                router: "/completePerson",
                title: "核销人员管理",
                role: [1003],
            }, {
                router: "/registration",
                title: "打卡记录管理",
                role: [1003],
            },
            {
                router: "/workingList",
                title: "核销记录管理",
                role: [1003],
            }
        ]
    }
])

const router = useRouter();

function navigateTo(pageName: string): void {
    router.push({ name: pageName });
}

function exitLogin(): void {
    sessionStorage.removeItem('token')
    router.replace({ name: 'login' });
}

</script>

<style lang="scss" scoped>
.el-header {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.el-aside {
    color: var(--el-text-color-primary);
}
</style>